<template>
    <div class="video_detail">
        <div class="video_banner">
            <img src="../assets/banner.jpg" v-if="!picture" class="one">
            <img :src="banner" v-if="picture" class="two">
        </div>
        <el-row class="video_bd" :gutter="24" style="margin-bottom:0">
            <el-col :span="6" class="left">
                <div class="grid-content">
                    <ul>
                        <li v-show="no_sort">暂无分类</li>
                        <li v-bind:class="{'back_active':videoDetail.cid==sort.id}" v-for="(sort,val) in left" :key="sort.side" @click="active($event,val)" :id="sort.id">
                            <router-link :to="{name:'video',params:{cid:sort.id}}">{{sort.title}}</router-link>
                        </li>
                    </ul>
                     <div style="display:none" ref="cid">{{$route.params.cid}}</div>
                     <div style="display:none" ref="cover">{{$route.params.cover}}</div>
                </div>
            </el-col>
            <el-col :span="18">
                <div id="video_box">
                    <el-row :gutter="20">

                        <el-col :span="24">
                            <div class="grid-content bg-purple-light">
                                <div class="video_detail_box">

                                    <p ref="hide" style="display:none">{{$route.params.id}}</p>
                                    <div class="wrap details">
                                        <div class="player">
                                            <!-- <video :src='videoDetail.video_url' width='100%' height='600' controls="controls" align='middle'></video> -->

                                            <video-player  class="vjs-custom-skin"
                                                ref="videoPlayer"
                                                :options="playerOptions"
                                                :playsinline="true"
                                                @play="onPlayerPlay($event)"
                                                @pause="onPlayerPause($event)"
                                                @ended="onPlayerEnded($event)"
                                                @loadeddata="onPlayerLoadeddata($event)"
                                                @waiting="onPlayerWaiting($event)"
                                                @playing="onPlayerPlaying($event)"
                                                @timeupdate="onPlayerTimeupdate($event)"
                                                @canplay="onPlayerCanplay($event)"
                                                @canplaythrough="onPlayerCanplaythrough($event)"
                                                @ready="playerReadied"
                                                @statechanged="playerStateChanged($event)">
                                           </video-player>

                                        </div>
                                        <div class="title">
                                            <p>{{videoDetail.title}}</p>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>

        </el-row>

    </div>
</template>


<script>
import { videoPlayer } from 'vue-video-player'
export default {
    name: 'app',
    data() {
        return {
            videoDetail: [],
            left: [],
            cid_focus:0,
            url:[],
            banner:[],
            picture:true,
            playerOptions:{},
            com_id:localStorage.getItem("companyid"),
            no_sort: false,
        }
    },
    components: {
        videoPlayer
    },
    computed: {
        
        player() {
            return this.$refs.videoPlayer.player
        }
    },
    methods: {
        update_video:function(url){
            var cover = this.$refs.cover.innerHTML;
            //console.log(cover)
             this.playerOptions={
                muted: false,
                autoplay: false,
                height:'500',
                preload: false,
                language: 'en',
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [{
                    type: "video/mp4",
                    src:url
                }],
                poster: cover,
            };
        },
        loadBanner() {
            this.$http.get('http://thy.588net.com/index.php/api/Company/get_company_index?' + 'company_id=' + this.com_id).then(function(res) {
                this.banner = res.body.data.company.video_banner;
                if(this.banner==''){
                   this.picture=false;
                   
                }else{
                   this.picture=true;
                  
                }
                console.log(this.banner)
            })
        },
        loadVideodetail: function() {
            var id = this.$refs.hide.innerHTML;
             var cid_focus = this.$refs.cid.innerHTML;
             this.cid_focus = this.$refs.cid.innerHTML;
            this.$http.get('http://thy.588net.com/index.php/article/Article/get_info?' + '&id=' + id).then(function(res) {
                this.videoDetail = res.body.data.article;
                this.url=res.body.data.article.video_url
                console.log(this.url); 
                this.update_video(this.url)
            })
             
            
        },
        loadLeftside() {
            this.$http.get('http://thy.588net.com/index.php/article/article/get_video_cate?'+ 'company_id=' + this.com_id).then(function(res) {
                this.left = res.body.data;
                if (res.body.data == "" || res.body.data == null) {
                    this.no_sort = true;
                } else {
                    this.no_sort = false;
                }
            })
        },
        active(event, val, id) {
            //page=1;
            this.nowIndex = val;
        },
       onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      onPlayerEnded(player) {
        // console.log('player ended!', player)
      },
      onPlayerLoadeddata(player) {
        // console.log('player Loadeddata!', player)
      },
      onPlayerWaiting(player) {
        // console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
        // console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
        // console.log('player Timeupdate!', player.currentTime())
      },
      onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
      },
      onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },
      // player is ready
      playerReadied(player) {
        // seek to 10s
        player.currentTime(0)
        // console.log('example 01: the player is readied', player)
      }
    },
    mounted() {
        var self=this;
        setTimeout(function(){
            var com_id=localStorage.getItem("companyid");
            self.com_id=com_id;
            self.loadLeftside();
            self.loadBanner();
        },400)
        
        this.id = this.$refs.hide.innerHTML;
        
        this.loadVideodetail();
        
    },
    activated: function() {
        $(".is-active").removeClass("is-active");
        $(".company_video").addClass("is-active");
        this.id = this.$refs.hide.innerHTML;
        this.loadVideodetail();   
        this.loadLeftside();
    }
}
</script>




<style scoped>
.back_active {
    background: #2277ff;
    color: #fff!important
}

.back_active a {
    color: #fff
}
.left_active a{
  color:#fff;  
}
li a {
    display: block;
    color:#5a5a5a;
}

.video_bd {
    margin-top: 24px
}

.video_banner {
    max-width: 1200px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
}

.video_banner img {
    width: 100%;
    height: 200px
}

.video-player {
    height: 500px
}

.video_detail_box {
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px 0px #d8d8d8;
}

.video_detail {
    max-width: 1200px;
    margin: 0 auto;
}

.details {


    /* min-height: 400px; */
}

.player {
    width: 100%;
}

.title {
    margin-top: 20px;
    /* height: 56px; */
    line-height: 28px;
    text-align: left;

    color: #5a5a5a;
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.title span {
    position: relative;
}

.details p {
    color: #666;
    padding-bottom: 2px;
    color: #333;
    opacity: 1;
}


.left ul {
    background: #fff;
}

.left ul li {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #5a5a5a;
    cursor: pointer;
    list-style: none;
}

.left_active {
    background: #2277ff;
    color: #fff!important;
}
</style>
